
<template>
  <div class="full-screen bg-base" :style="backgroundStyles">
    <div class="login">
      <h2>用户登录</h2>
      <el-form :model="userInfo" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="telphone">
          <el-input v-model="userInfo.telphone" autocomplete placeholder="请输入用户账号" size="medium" ref="input-telphone" prefix-icon="jxfIcon icon-shuruyonghumingcheng"  @keyup.enter.native="enterNextInput('password')">
            <!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="userInfo.password" placeholder="请输入密码" size="medium" ref="input-password" prefix-icon="jxfIcon icon-shurudenglumima" @keyup.enter.native="submitForm('ruleForm')">
          </el-input>
        </el-form-item>
        <el-form-item class="text-center">
          <el-button type="primary" @click="submitForm('ruleForm')" size="medium">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import md5 from 'js-md5'
  import background from '@/assets/images/background.jpg'
  export default {
    name: 'Login',
    data() {
      return {
        userInfo: {
          authCode: "",
          browser: "",
          equipmentId: "",
          ipAddress: "",
          loginType: 1,
          userType: 1,
          terminalType: 3,
          telphone: '',
          password: ''
        },
        backgroundStyles: {
          backgroundImage: 'url(' + background + ')',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'top',
          backgroundAttachment: 'fixed'
        },
        rules: {
          telphone: [
            {required: true, message: '请输入手机号',trigger: ['blur', 'change']},
            {validator: validate.phone, trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码',trigger: ['blur', 'change']}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userInfo.browser = this.getBrowserInfo()
            this.userInfo.password = md5(this.userInfo.password).toUpperCase()
            this.login(this.userInfo)
          } else {
            return false;
          }
        });
      },
      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      login(formData){
        ajax.post(apis.admin.login,formData).then(res => {
          if(res.code === "10000000"){
            this.$message({
              message: '登录成功',
              type: 'success',
              showClose: true
            });
            let roleName = ""
            let userInfo = {
              telphone: res.data.telphone,
              userName: res.data.userName,
              userRole: roleName,
              userId: res.data.userId,
              token:res.data.token,
              headImg: res.data.userLogo,
              userType: res.data.userType
            }
            setTimeout(() => {
              window.localStorage.setItem('adminLogin', JSON.stringify(userInfo))
              this.$router.push({ name: 'home' })
            }, 1000)
          }else{
            this.$message({
              message: res.message,
              type: 'error',
              showClose: true
            });
          }

        }).catch(err => {
          console.log(err)
        })
      },
      getBrowserInfo() {
        let Sys = {}
        let ua = window.navigator.userAgent.toLowerCase()
        let re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/
        let m = ua.match(re);
        try {
          Sys.browser = m[1].replace(/version/, "'safari")
          Sys.ver = m[2]
        } catch (e) {
        }
        return Sys.browser? Sys.browser + ( Sys.ver ? " " + Sys.ver : "" ): ""
      }

    },
  }
</script>

<style lang="scss" scoped>
  .full-screen{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-width: 300px;
    position: relative;
    .login{
      position: absolute;
      top: 66%;
      left: 50%;
      padding: 20px 30px;
      min-width: 250px;
      border-radius: 5px;
      background: white;
      transform: translate(-50%, -50%);
      h2{
        padding: 0 30px 30px;
        font-size: 30px;
        letter-spacing: 2px;
        text-align: center;
        font-weight: 460;
      }
    }
  }
</style>
<style lang="scss">
  .full-screen {
    .el-input {
      width: 350px;
      font-size: 16px;
    }
    .el-input--medium .el-input__inner {
      padding: 5px 40px;
      height: 50px!important;
      line-height: 50px!important;
    }
    i {
      font-size: 26px;
    }
    .el-button {
      width: 100px;
      height: 40px;
      font-size: 16px;
    }
  }
</style>
